<template>
    <el-container class="home-container">
      <el-header style="background-color: #545c64">
        <div>
          <span>{{title}}</span>
        </div>
      </el-header>
     <el-container>
       <el-aside width="200px" style="background-color: #545c64">
         <!-- <div class="toggle-button">|||</div> -->
         <el-menu :unique-opened="true" :collapse-transition="false"  active-text-color="#ff0000"
         :router="true" :default-active="activePath" text-color="#fff" background-color="#545c64">
           <el-submenu :index="item.path" v-for="item in menuList" :key="item.path">
             <template slot="title">
               <i class="el-icon-menu"></i>
               {{item.name}}
             </template>
             <el-menu-item :index="child.path" v-for="child in item.children" :key="child.path">
               <template slot="title">
               <i class="el-icon-menu"></i>
               {{child.name}}
             </template>
             </el-menu-item>
           </el-submenu>
         </el-menu>
       </el-aside>
       <el-main>
         <router-view></router-view>
       </el-main>
     </el-container>
    </el-container>
</template>
<script>
export default {
  name: 'vis',
  data () {
    return {
      title: 'Visualization By D3.js',
      menuList: [],
      activePath: ''
    }
  },
  created () {
    this.setMenuList()
  },
  methods: {
    setMenuList () {
      this.menuList = [
        {
          name: '柱状图',
          path: '/barchart',
          children: [
            {
              name: '基础柱状图',
              path: '/barchart'
            },
            {
              name: '堆叠柱状图',
              path: '/stackbar'
            },
            {
              name: '多列柱状图',
              path: 'multibar'
            },
            {
              name: '水平柱状图',
              path: 'horizontalbar'
            }
          ]
        },
        {
          name: '折线图',
          path: '/linechart',
          children: [
            {
              name: '基础折线图',
              path: '/linechart'
            },
            {
              name: '区域折线图',
              path: '/arealinechart'
            },
            {
              name: '堆叠面积图',
              path: '/stackline'
            }
          ]
        },
        {
          name: '饼图',
          path: '/piechart',
          children: [
            {
              name: '饼图',
              path: '/piechart'
            },
            {
              name: '玫瑰图',
              path: '/rose'
            }
          ]
        },
        {
          name: '仪表盘',
          path: '/gaugechart',
          children: [
            {
              name: '基本仪表盘',
              path: '/gaugechart'
            },
            {
              name: '有间隔的仪表盘',
              path: '/responsivegauge'
            },
            {
              name: '有刻度的仪表盘',
              path: '/graduatedgauge'
            }
          ]
        },
        {
          name: '地图',
          path: '/geomap',
          children: [
            {
              name: '地图',
              path: '/geomap'
            },
            {
              name: '区域地图',
              path: '/areamap'
            }
          ]
        },
        {
          name: '散点图',
          path: '/scatter',
          children: [
            {
              name: '散点图',
              path: '/scatter'
            },
            {
              name: '气泡图',
              path: '/bubble'
            },
            {
              name: '多符号散点图',
              path: '/multisignscatter'
            }
          ]
        },
        {
          name: '雷达图',
          path: '/radarchart',
          children: [
            {
              name: '圆形雷达图',
              path: '/radarchart'
            },
            {
              name: '雷达图',
              path: '/radar'
            }
          ]
        },
        {
          name: '树图',
          path: '/tree',
          children: [
            {
              name: '树图',
              path: '/tree'
            },
            {
              name: '径向树',
              path: '/radiustree'
            },
            {
              name: '矩阵树图',
              path: '/treemap'
            }
          ]
        },
        {
          name: '平行坐标',
          path: '/parallel',
          children: [
            {
              name: '平行坐标',
              path: '/parallel'
            }
          ]
        },
        {
          name: '旭日图',
          path: '/sunburst',
          children: [
            {
              name: '旭日图',
              path: '/sunburst'
            }
          ]
        },
        {
          name: '桑基图',
          path: '/sankey',
          children: [
            {
              name: '桑基图',
              path: '/sankey'
            }
          ]
        },
        {
          name: '弦图',
          path: '/chord',
          children: [
            {
              name: '弦图',
              path: '/chord'
            }
          ]
        },
        {
          name: '日历图',
          path: '/calendar',
          children: [
            {
              name: '日历图',
              path: '/calendar'
            }
          ]
        },
        {
          name: '力导向图',
          path: '/force',
          children: [
            {
              name: '力导向图',
              path: '/force'
            }
          ]
        }
      ]
    }
  }
}
</script>
<style scoped>
.home-container {
  height: 100%;
}
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0px;
  align-items: center;
  color: #fff;
  font-size: 20px;
}
.el-header>div {
    display: flex;
    align-items: center;
    margin-left: 15px;
    text-align: center;
  }
.el-aside, .el-menu {
  border-right: none;
  background-color: #333744;
}
.el-aside>.el-menu>.el-menu-item>span {
  color: white;
}
</style>
